<template>
    <el-drawer class="bs-drawer" 
      :model-value="modelValue"
      @update:model-value="handleUpdateModalValue"
      :append-to-body="appendToBody"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      v-bind="$attrs"
    >
      <template #header="{close, titleId, titleClass}">
        <slot name="header" :close="close" :titleId="titleId" :titleClass="titleClass">
          <div class="title-text">{{ title }}</div>
        </slot>
      </template>
      <!--内容区域-->
      <div class="drawer-content">
        <el-scrollbar>
          <slot/>
        </el-scrollbar>
      </div>
      <template #footer>
        <slot name="footer">
          <div class="drawer-footer">
            <el-button size="large" @click="handleCancel()" v-if="cancelBtnVisible">{{ cancelBtnText }}</el-button>
            <el-button size="large" type="primary" @click="handleConfirm()" v-if="confirmBtnVisible">{{ confirmBtnText }}</el-button>
          </div>
        </slot>
      </template>
    </el-drawer>
  </template>
<script setup lang="ts">
  
  
const emit = defineEmits(['update:model-value'])
  
  type BsDrawerProps = {
    modelValue: boolean
    title?: string
    appendToBody?: boolean
    closeOnClickModal?: boolean
    closeOnPressEscape?: boolean
    /**是否显示取消按钮 */
    cancelBtnVisible?: boolean
    /**取消按钮文案 */
    cancelBtnText?: string
    /**取消按钮点击逻辑处理 */
    cancelBtnFn?: () => any
    /**是否显示确定按钮 */
    confirmBtnVisible?: boolean
    /**确定按钮文案 */
    confirmBtnText?: string
    /**确定按钮点击逻辑处理 */
    confirmBtnFn?: () => any
  }
  
const props = withDefaults(defineProps<BsDrawerProps>(), {
  modelValue: false,
  title: '',
  appendToBody: true,
  closeOnClickModal: false,
  closeOnPressEscape: false,
  cancelBtnVisible: true,
  confirmBtnVisible: true,
  cancelBtnText: '取消',
  confirmBtnText: '确定'
})
  
const handleUpdateModalValue = (value: boolean) => {
  emit('update:model-value', value)
}
  
/**
   * 点击取消事件处理
   */
const handleCancel = async () => {
  if (props.cancelBtnFn) {
    try {
      await props.cancelBtnFn()
      emit('update:model-value', false)
    } catch (e) {
      console.error(e)
    }
  } else {
    emit('update:model-value', false)
  }
}
  
/**
   * 点击确定事件处理
   */
const handleConfirm = async () => {
  if (props.confirmBtnFn) {
    try {
      const res = await props.confirmBtnFn()
      if (res !== false) {
        emit('update:model-value', false)
      }
    } catch (e) {
      console.error(e)
    }
  } else {
    emit('update:model-value', false)
  }
}
</script>
  <style lang="scss">
  .bs-drawer {
    padding: 0;
    .el-drawer__header {
      line-height: 24px;
      padding: 12px 16px;
      border-bottom: solid 1px var(--border-color);
      margin-bottom: 0;
      .title-text {
        min-height: 24px;
        font-size: 16px;
        font-weight: 500;
        color: #191d32;
      }
      .el-drawer__close-btn {
        font-size: 16px;
      }
    }
    .el-drawer__body {
    padding: 0;
    overflow: hidden;
  }
    .el-drawer__footer {
      padding: 24px 16px;
    }
    .drawer-footer {
      .el-button {
        min-width: 76px;
      }
      .el-button+.el-button {
        margin-left: 16px;
      }
    }
  }
  .drawer-content {
    height: calc(100vh - 136px)
  }
  </style>